<template>
	<div class="data-validation">
		<!-- <div class="data-validation-header bg">
			<el-row type="flex" justify="space-around">
				<el-col :span="5">
					<span class="text-bold">选择sheet：</span>
					<el-select v-model="value" placeholder="请选择">
						<el-option key="1" label="模板一" value="1"></el-option>
						<el-option key="2" label="模板二" value="2"></el-option>
					</el-select>
				</el-col>
				<el-col :span="7">
					<span class="text-bold" style="margin-right: 10px;">
						<el-popover width="300" placement="top-start" trigger="hover">
							1.上传Excel文档进行批量发送工资条时，系统会解析您上传的Excel文档。
							<br />
							2.由于每个人上传的Excel文档内容存在差异，因此需要您具体告诉Excel文档中哪一列存储是员工的姓名信息，哪一列存储的是员工手机信息，您正确设置了这些信息后,才能确保将正确的数据发送给指定的员工。
							<span slot="reference">
								<i class="el-icon-question"></i>
								对应必填项：
							</span>
						</el-popover>
					</span>
					姓名：
					<el-select v-model="value" placeholder="请选择">
						<el-option key="1" label="姓名1" value="1"></el-option>
						<el-option key="2" label="姓名2" value="2"></el-option>
					</el-select>
				</el-col>
				<el-col :span="6">
					手机号：
					<el-select v-model="value" placeholder="请选择">
						<el-option key="1" label="模板一" value="1"></el-option>
						<el-option key="2" label="模板二" value="2"></el-option>
					</el-select>
				</el-col>
				<el-col :span="6">
					实发工资：
					<el-select v-model="value" placeholder="请选择">
						<el-option key="1" label="模板一" value="1"></el-option>
						<el-option key="2" label="模板二" value="2"></el-option>
					</el-select>
				</el-col>
			</el-row>
		</div> -->
		<div class="data-validation-header flex-between flex-items-center">
			<div>本次共导入：{{ tableData.length }}人 异常：{{ 0 }}人 注意：{{ 0 }}人</div>
			<div>
				<el-input
					v-model="input"
					placeholder="请输入姓名或者手机号"
					style="width: 200px; margin-right: 10px;"
					@keydown.enter="search"
				></el-input>
				<el-button type="primary" icon="el-icon-search" plain @click="search">搜索</el-button>
			</div>
		</div>
		<div class="data-validation-header bg">
			注意：本次导入，新增员工1名，本次可顺利发放完成；点击查看新增员工
		</div>
		<div class="table">
			<el-table :data="tableData" border style="width: 100%;">
				<el-table-column
					v-for="(item, index) in tableTitle"
					:prop="item"
					:label="item"
					:key="item"
					:width="60 + item.length * 10"
				>
					<template slot-scope="scope">
						{{ scope.row[index][item] }}
					</template>
				</el-table-column>
				<el-table-column width="100" fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button @click="handleViewClick(scope.row)" type="text">查看</el-button>
						<el-button @click="handleUpdateClick(scope.row)" type="text">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="pagination">
			<el-pagination
				small
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page.currentPage"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="slipData.length - 1"
			></el-pagination>
		</div>
		<div class="data-validation-footer flex-center">
			<el-button type="primary" size="lager" @click="$router.push('/sendPaySlip/paySlipUpload')">
				重新上传
			</el-button>
			<!-- <el-button type="primary" size="lager" @click="handleDataValidation">
				数据校验
			</el-button> -->
			<el-button type="primary" size="lager" @click="handleStepClick">下一步</el-button>
		</div>
	</div>
</template>

<script>
// import { slipData } from './data'

export default {
	name: 'PaySlipDataValidation',
	props: {
		slipData: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			active: 2,
			laoding: false,
			value: '',
			input: '',
			page: {
				currentPage: 1,
				pageSize: 10,
				total: 0
			}
		}
	},
	computed: {
		tableTitle() {
			console.log(this.slipData)
			return this.slipData[0] ? this.slipData[0].map(item => item.title) : []
		},
		tableData() {
			return this.slipData.map(item =>
				item.map((_item, _index) => ({ [this.tableTitle[_index]]: _item.value }))
			)
		}
	},
	watch: {
		slipData(val) {
			console.log(val)
		},
		active(val) {
			this.$emit('step-next', val)
		}
	},
	created() {
		this.loading = true
		setTimeout(() => {
			this.loading = false
		}, 1000)
	},
	methods: {
		search() {},
		handleViewClick(row) {
			console.log(row)
		},
		handleUpdateClick(row) {
			console.log(row)
		},
		handleSizeChange(val) {
			this.page.pageSize = val
		},
		handleCurrentChange(val) {
			this.page.currentPage = val
		},
		handleStepClick() {
			this.active = 3
		},
		handleDataValidation() {}
	}
}
</script>

<style lang="scss" scoped>
.data-validation {
	.data-validation-header {
		margin: 0 auto;
		padding: 10px 20px;
		&.bg {
			background-color: #ebf2f8;
			border-radius: 4px;
		}
	}
	.table {
		margin: 20px auto 0;
	}
	.data-validation-footer {
		margin-top: 100px;
	}
}
</style>
